<template>
  <button class="escook-button" :class="type"><slot /></button>
</template>

<script setup>
defineProps({
  type: {
    default: 'primary',
    validator(value) {
      return ['primary', 'danger', 'warning', 'default'].includes(value)
    }
  }
})
</script>

<style scoped>
.escook-button {
  --primary: #006aff;
  --danger: rgb(255, 79, 79);
  --warning: rgb(255, 185, 55);
  --default: rgb(241, 241, 241);
  border: 2px solid #000;
  height: 36px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
/* hover 时不透明度变为 0.9 */
.escook-button:hover {
  opacity: 0.9;
}
/* 点击时不透明度变为 0.8 */
.escook-button:active {
  opacity: 0.8;
}

/* 被禁用时不透明度变为 0.6 */
.escook-button[disabled] {
  opacity: 0.6;
}

.primary {
  background-color: var(--primary);
  color: white;
  border-color: hsl(from var(--primary) h s calc(l - 10));
}

.danger {
  background-color: var(--danger);
  color: white;
  border-color: hsl(from var(--danger) h s calc(l - 10));
}

.warning {
  background-color: var(--warning);
  color: white;
  border-color: hsl(from var(--warning) h s calc(l - 10));
}

.default {
  background-color: var(--default);
  color: #000;
  border-color: hsl(from var(--default) h s calc(l - 10));
}
</style>
